
$color-red:red;
$color-blue:blue;
@mixin flex($direction,$jus-con:'',$ali-itm:'') {
    display: flex;
    @if $direction=='column' {
        flex-direction: column;
    }@else {
        flex-direction: 'xxx';
    }
    justify-content: $jus-con;
    align-items: $ali-itm;
}
.ext{
    color: green;
}
h1.ext {
    font-size: 22px;
}
.father {
    color: $color-red;
    .sonOne {
        @import "./imp.scss";

        background-color: $color-blue;
        .one1 {
            color: $color-blue;
            @extend .ext; 
        }
    }
    .sonTwo {
        // @include flex('row','flex-end','center');
        @include flex($direction:'',$jus-con:center,$ali-itm:center);
        background-color: $color-blue;
        @extend .ext;
    }
    
}
// 插值语句
$border:border;
.#{$border} {
    #{border}:1px solid yellow;
}
// for
@for $i from 1 through 3 {
    .item#{$i} {
        width: 1px*#{$i};
    }
}
// each
@each $item in a,b,c,d,e {
    .test#{$item} {
        color: red;
    }
}
@each $item,$color in (color,red),('width','2px'),('height','3px') {
    .cc {
        #{$item}:#{$color};
    }
}